<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
</head>
    <body>
    <div class="layui-form-item">
        <div class="layui-form-item demoTable">
            <label class="layui-form-label">角色名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="roleName" required  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-btn-group">
                <button type="button" data-type="search" id="search" class="layui-btn">检索</button>
                <button type="button" data-type="add" id="add" class="layui-btn">增加</button>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="test" lay-filter="tableEvent"></table>
    <script src="../../../js/layui/layui.js"></script>
    <script src="../../../js/myJQ.js"></script>
    <script>
        layui.use(['table','jquery','layer'], function(){

           var basePath = getRootPath();
           var table = layui.table;
           var $ = layui.$;
           var layer = layui.layer;
           table.render({
                elem: '#test'
                ,url:'/role/getRoleList'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,id:'tableData'
                ,where:{}
                ,cols: [[
                    {field:'id', width:120, title: 'ID', sort: true}
                    ,{field:'name', width:150, title: '角色名称'}
                    ,{field:'sort', width:150, title: '排序'}
                    ,{field:'description', width:150, title: '描述'}
                    ,{field:'insertDate', width:200, title: '创建时间',templet:function (data) {
                        if(data.insertDate!=null&&data.insertDate!="")
                           return layui.util.toDateString(data.insertDate,'yyyy-MM-dd HH:mm:ss');
                        else return ""
                       }}
                    ,{field:'updateDate',width:200, title: '更新时间',templet:function (data) {
                        debugger
                        if(data.updateDate!=null&&data.updateDate!="")
                           return layui.util.toDateString(data.updateDate,'yyyy-MM-dd HH:mm:ss');
                        else return""
                       }}
                    ,{field:'caozuo',width:250, title: '操作',templet:function (data) {
                        return '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="edt" lay-event="edt" lay-id="'+ data.id +'">' +
                               '<i class="layui-icon layui-icon-edit"></i>编辑</a>' +
                               '<a class="layui-btn layui-btn-xs layui-btn-danger" data-type="del" lay-event="del" lay-id="'+ data.id +'">' +
                               '<i class="layui-icon layui-icon-delete"></i>移除</a>';
                    }}
                ]]
            });

           var active = {
               edt:function (obj) {
                   debugger;
               },
               del:function (obj) {
                   debugger;
               },
               search:function () {
                   debugger;
                   var index = layer.msg('查询中，请稍后...',{icon:16,time:false,shade:0});
                   setTimeout(function () {
                       table.reload('tableData',{
                          /* method: 'GET',*/
                           where:{
                               name:$("#roleName").val()
                           }
                       })
                       layer.close(index);
                   },800);

               }
           }

           $('.demoTable .layui-btn').on('click',function () {
               debugger
               var type = $(this).data('type');
               active[type]?active[type].call(this):'';
           });

           var update = function(data){
               var roleId= data.id;
               var url = "/role/updateById",title="编辑" ,path = "/role/addPage?id="+roleId,area =['350px', '400px'];
               layer.open({
                   type: 2,
                   title: title, //不显示标题栏
                   closeBtn: 2,
                   area: area,
                   shade: 0.8,
                   id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                   btn: ['保存', '取消'],
                   btnAlign: 'r',
                   moveType: 1, //拖拽模式，0或者1
                   content: path,
                   yes: function (index, layero) {
                       debugger;
                       var load = layer.load();
                       //获取当前打开窗口的html
                       var body = layer.getChildFrame('body', index);
                       var id = body.find("#id").val();
                       var name = body.find("#name").val();
                       var sort = body.find("#sort").val();
                       var decrp = body.find("#description").val();
                       if(name.trim()==''){
                           layer.msg('角色名称不能为空',function () {
                               time:2000
                           });
                           layer.close(load);
                       }
                       var params = {};
                       params.id = id;
                       params.name = name;
                       params.sort = sort;
                       params.description = decrp;
                       $.ajax({
                           url:basePath+url,
                           dataType:'json',
                           type:"POST",
                           data:params,
                           success:function (result) {
                               debugger;
                               layer.close(load);
                               layer.msg(result.msg,{time:5000});
                               if(result.returnValue="OK"){
                                   location.reload();
                               }
                               layer.close(load);
                           }
                       });

                   },
                   btn2: function (index, layero) {
                       debugger;
                   }
               });
           }

           var deletRole = function(obj){
               var params = {};
               params.id=obj.id;
                $.ajax({
                    url:basePath+"/role/deletRole",
                    data:params,
                    dataType:'json',
                    type:'POST',
                    success:function (result) {
                        layer.msg(result.msg)
                        location.reload();
                    }
                });
           }

            //监听工具条
            table.on('tool(tableEvent)', function (obj) {
                var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
                switch(event){
                    case "edt":
                        update(data);
                        break;
                    case "del":
                        deletRole(data);
                        break;
                }
            });

           $("#searchsss").click(function () {
               var name =$("#roleName").val();
               var parms = {};
               parms.name = name;
               $.ajax({
                   url:basePath+"/role/getRoleById",
                   dataType:"json",
                   type:"POST",
                   data:parms,
                   success:function (result) {
                       debugger;
                       console.log(JSON.stringify(result));
                   }
               });
           });

            $("#add").click(function () {
                var title = "新增",path = "/role/addPage",area =['350px', '400px'],url="/role/addRole";
                open(title,path,url,area);
            });

            /**
             * 打开新的窗口
             * @param title 窗口名
             * @param path 窗口路径
             * @param url  后台数据交换路径
             */
            var open = function(title,path,url,area){
                layer.open({
                    type: 2,
                    title: title, //不显示标题栏
                    closeBtn: 2,
                    area: area,
                    shade: 0.8,
                    id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                    btn: ['保存', '取消'],
                    btnAlign: 'r',
                    moveType: 1, //拖拽模式，0或者1
                    content: path,
                    yes: function (index, layero) {
                        debugger;
                        var load = layer.load();
                        //获取当前打开窗口的html
                        var body = layer.getChildFrame('body', index);
                        var name = body.find("#name").val();
                        var sort = body.find("#sort").val();
                        var decrp = body.find("#description").val();
                        if(name.trim()==''){
                            layer.msg('角色名称不能为空',function () {
                                time:2000
                            });
                            return false;
                        }
                        var addForm = body.find(".layui-form").serialize();
                        $.ajax({
                            url:basePath+url,
                            dataType:'json',
                            type:"POST",
                            data:{name:name,sort:sort,description:decrp},
                            success:function (result) {
                                debugger;
                                layer.close(load);
                                layer.msg(result.msg,{time:5000});
                                if(result.returnValue="OK"){
                                    location.reload();
                                }
                            }
                        });

                    },
                    btn2: function (index, layero) {
                    }
                });
            }
        });


    </script>
    </body>
</html>